<template>
  <el-row type="flex" align="middle" class="side">
    <el-badge :value="getGlobCartNumber">
      <el-link :underline="false" type="primary" icon="edu-icon-gouwuche" @click="goCart"></el-link>
    </el-badge>
    <template v-if="$util.isDef(siteInfo.online_consult)">
      <el-divider></el-divider>
      <el-link :underline="false" type="primary" icon="edu-icon-kefu1" @click="goConsult"></el-link>
    </template>
    <el-backtop :right="0" :bottom="0">
      <el-divider></el-divider>
      <i class="edu-icon-dingbu"></i>
    </el-backtop>
  </el-row>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    // 购物车数量
    ...mapState({
      getGlobCartNumber: state => state.projectSetting.globCartNumber
    }),
    ...mapGetters({
      siteInfo: 'projectSetting/getGlobSiteInfo'
    })
  },
  methods: {
    // 进入购物车页面
    goCart() {
      this.$router.push({
        path: '/buy/cart'
      })
    },
    // 客服
    goConsult() {
      let consult = this.siteInfo.online_consult
      let url = consult
      if (this.$util.digits(consult)) {
        url = 'http://wpa.qq.com/msgrd?v=3&uin=' + consult + '&site=qq&menu=yes'
      }
      if (!this.$util.isEmpty(url)) {
        window.open(url)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.side {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 999;
  width: 60px;
  flex-direction: column;
  border-radius: 2px;
  padding: 20px 0;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(235, 238, 245, 1);
  .el-divider--horizontal {
    width: 20px;
  }
  .el-link {
    font-size: 20px;
  }
  .el-backtop {
    position: relative;
    box-shadow: none;
    border-radius: 0;
    height: auto;
    margin-top: 40px;
    &:hover {
      background-color: transparent;
    }
    .el-divider {
      position: absolute;
      top: -20px;
      margin: 0;
    }
  }
}
</style>
